<template>
  <div class="home">
    <van-tabs v-model="active" scrollspy sticky>
      <van-tab title="商品"
        ><div class="top">
          <!-- 渲染详情页数据 -->
          <dl v-for="(v, i) in details" :key="i">
            <dt>
              <!-- 无缝轮播图 -->
              <van-swipe
                class="my-swipe"
                :autoplay="3000"
                indicator-color="white"
              >
                <!-- 二次循环获取详情轮播图 -->
                <van-swipe-item v-for="(v, i) in v.slider_image" :key="i">
                  <!-- 图片懒加载 -->
                  <img v-lazy="v" />
                </van-swipe-item>
              </van-swipe>
            </dt>
            <dd>
              <div class="box2">
                <h2 style="color: red">￥{{ v.price }}</h2>
                <h4>￥{{ v.vip_price }} VIP</h4>
              </div>
              <div class="box3">
                <van-icon name="share-o" @click="showShare = true" />
              </div>
            </dd>
            <dd>
              {{ v.store_name }}
            </dd>
            <dd>
              <div class="px">
                <span>原价:￥{{ v.ot_price }}</span
                ><span>库存:{{ v.stock }}{{ v.unit_name }}</span
                ><span>销量:{{ v.sales }}{{ v.unit_name }}</span>
              </div>
            </dd>
            <dd>
              <van-cell is-link @click="showPopup">
                <div class="box2" style="color: #ccc">优惠券:</div>
              </van-cell>
            </dd>
          </dl>
        </div>
      </van-tab>
      <van-tab title="评价">
        <div class="mainTop" @click="show = true">
          <div class="Topleft">请选择:</div>
          <div class="Topcount"></div>
          <div class="Topright"><van-icon name="arrow" /></div>
        </div>
        <!-- 有的页面没有评价 -->
        <!-- 判断有没有第一条数据如果有就渲染，没有就不渲染 -->
        <div class="" v-if="listfor[0]">
          <!-- 渲染评价 -->
          <div class="mainCount" v-for="(v, i) in listfor" :key="i">
            <div class="one">
              <div class="left">用户评价({{ v.is_reply }})</div>
              <div class="count"></div>
              <div class="right" style="color: red">100%</div>
            </div>
            <hr />
            <div class="two">
              <ul>
                <li><img :src="v.avatar" alt="" /></li>
                <li>{{ v.nickname }}</li>
              </ul>
              <div class="twoTop">{{ v.add_time }}</div>
              <div class="twoTop">{{ v.comment }}</div>
              <div class="twoImg twoTop"><img :src="v.pics" alt="" /></div>
              <div class="gray twoTop">
                <span style="color: red">店小二:</span
                >{{ v.merchant_reply_content }}
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="推荐">
        <!-- 推荐 -->
        <Recommend></Recommend
      ></van-tab>
      <van-tab title="详情">
        <div class="fot">
          <div class="cp">产品介绍</div>
          <div class="cpjs" v-html="description"></div></div
      ></van-tab>
    </van-tabs>
    <div class="zw"></div>
    <!-- 底部标签 -->
    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot @click="service" />
        <van-goods-action-icon icon="star-o" text="收藏" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="length"
          @click="shopCar"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="show = true"
        />
        <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="show = true"
        />
      </van-goods-action>
      <!-- 点击加入购物车弹出弹窗 -->
      <van-action-sheet v-model="show">
        <div class="hed">
          <dl v-for="(v, i) in details" :key="i">
            <dt><img :src="v.image" alt="" /></dt>
            <dd>
              <h3>{{ v.store_name }}</h3>
            </dd>
            <dd>
              <h2 style="color: red">￥{{ v.price }}</h2>
            </dd>
            <dd>
              <h4>库存:{{ v.stock }}{{ v.unit_name }}</h4>
            </dd>
          </dl>
        </div>
        <!-- 规格数据 -->
        <div class="content">
          <!-- 渲染颜色 -->
          <div class="" v-if="productAttr[0]">
            <div>{{ productAttr[0].attr_name }}</div>
            <div class="color">
              <ul>
                <li
                  :class="currentIndex == index ? 'item active' : ''"
                  v-for="(item, index) in productAttr[0].attr_value"
                  :key="index"
                  @click="size(item, index)"
                >
                  {{ item.attr }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 渲染尺码 -->
          <div class="" v-if="productAttr[1]">
            <div>{{ productAttr[1].attr_name }}</div>
            <div class="color">
              <ul>
                <li
                  v-for="(items, indexs) in productAttr[1].attr_value"
                  :key="indexs"
                  :class="currentIndexs == indexs ? 'items actives' : ''"
                  @click="sizes(items, indexs)"
                >
                  {{ items.attr }}
                </li>
              </ul>
            </div>
          </div>
          <!-- 数量 -->
          <div class="number"><van-stepper v-model="value" /></div>
        </div>
        <van-goods-action v-for="(item, i) in details" :key="i">
          <van-goods-action-icon icon="chat-o" text="客服" dot />
          <van-goods-action-icon icon="star-o" text="收藏" />
          <van-goods-action-icon
            icon="cart-o"
            text="购物车"
            :badge="length"
            @click="shopCar"
          />
          <van-goods-action-button
            type="warning"
            text="加入购物车"
            @click="join(item.id)"
          />
          <van-goods-action-button
            type="danger"
            text="立即购买"
            @click="close(item.id)"
          />
        </van-goods-action>
      </van-action-sheet>
      <!-- 分享弹窗 -->
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
      <!-- 优惠券弹窗 -->
      <van-popup
        v-model="showCoun"
        round
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '60%', background: '#eee' }"
      >
        <DetailCoupon></DetailCoupon>
      </van-popup>
    </div>
    <!-- 返回上一页 -->
    <div class="back">
      <van-icon @click="backs" name="arrow-left" />&nbsp;|&nbsp;<van-icon
        name="wap-home-o"
        @click="indexs"
      />
    </div>
    <!-- 图标插槽 -->
    <Iconc>
      <template v-slot:scope> <div class=""></div></template>
    </Iconc>
  </div>
</template>

<script>
import { detail, getShopLength, GoShop, goClose } from "@/api/request";
// 优惠券组件
import DetailCoupon from "@/components/detailCoupon.vue";
// 懒加载
import lazyLoad from "../../../public/lazyLoad";
// 推荐组件
import Recommend from "@/components/recommend.vue";
// 插槽组件
import Iconc from "@/components/iconc.vue";

export default {
  directives: {
    lazyLoad,
  },
  data() {
    return {
      active: 0,
      // 详情页
      details: [],
      // 购物车
      show: false,
      // 优惠券
      showCoun: false,
      ustoken: true,
      thipric: [],
      // 颜色
      productAttr: [],
      // 尺码
      productAttrs: [],
      // 分享
      showShare: false,
      // 颜色
      colors: [],
      currentIndex: 0,
      // 尺码
      newsize: [],
      currentIndexs: 0,
      // 分享
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      // 评价
      listfor: [],
      // 数量
      value: 1,
      // 产品介绍
      description: "",
      // 图标
      icont: true,
      // 购物车数量
      length: 0,
      // 结算id
      closes: [],
    };
  },
  methods: {
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    // 优惠券
    showPopup() {
      this.showCoun = true;
    },
    // 点击颜色
    size(val, index) {
      this.currentIndex = index;
      this.colors = val;
    },
    // 点击尺码
    sizes(val, index) {
      this.currentIndexs = index;
      this.newsize = val;
    },
    // 点击加入购物车
    join(index) {
      GoShop(index, this.value, 0, "").then((res) => {
        console.log(res);
      });
    },
    // 返回上一页
    backs() {
      history.go(-1);
    },
    // 返回首页
    indexs() {
      this.$router.push("/index");
    },
    // 跳转购物车
    shopCar() {
      this.$router.push("/shop");
    },
    // 滚动隐藏
    handleScroll() {
      // 页面滚动距顶部距离
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      var scroll = scrollTop - this.i;
      this.i = scrollTop;
      if (scroll <= 0) {
        document.querySelector(".van-sticky").style.display = "none";
      } else {
        document.querySelector(".van-sticky").style.display = "block";
      }
    },
    // 点击客服
    service() {
      this.$router.push("/service");
    },
    // 点击结算
    close(id) {
      goClose(id, this.value, this.value, "").then((res) => {
        // 获取id
        this.closes = res.data.data.cartId;
        // 传入结算页面
        this.$router.push(`/close?cartid=${this.closes}&new=${this.value}`);
      });
    },
  },
  // 监听页面滚动事件
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    // 监听（绑定）滚轮 滚动事件
  },
  components: {
    DetailCoupon,
    Iconc,
    Recommend,
  },
  created() {
    // 获取详情页的id数据
    detail(this.$route.query.id).then((res) => {
      this.productAttr = res.data.data.productAttr;
      // 详情数据
      this.details = [res.data.data.storeInfo];
      // 产品介绍
      this.description = res.data.data.storeInfo.description;
      // 评价
      this.listfor = [res.data.data.reply];
    });
    // 购物车数据
    getShopLength().then((res) => {
      this.length += res.data.data.count;
    });
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: white;
  position: fixed;
  top: 0;
  z-index: 100;
  ul {
    display: flex;
    justify-content: space-evenly;
    li {
      height: 40px;
    }
    .shopSp {
      border-bottom: 1px solid red;
    }
  }
}
img {
  width: 100%;
  height: 360px;
}
.my-swipe .van-swipe-item {
  text-align: center;
}
.top {
  width: 100%;
  position: relative;
  dl {
    width: 100%;
    background: white;
    dd {
      margin-left: 2%;
      display: flex;
      align-items: baseline;
      line-height: 35px;
      // -webkit-line-clamp: 1;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // overflow: hidden;
      // text-overflow: ellipsis;
      //
      .box2 {
        display: flex;
        flex: 1;
      }
      .box3 {
        margin-right: 5%;
      }
      .px {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        color: #ccc;
        span {
          width: 50%;
        }
      }
    }
  }
}
// 选择颜色
.color {
  width: 100%;
  ul {
    display: flex;
    justify-content: space-evenly;
    li {
      width: 15%;
      list-style: none;
      text-align: center;
      // button {
      // width: 50px;
      background: #eee;
      border: none;
      border-radius: 25px;
      // }
    }
  }
}
.hed {
  dl {
    width: 100%;
    margin-top: 2%;
    dt {
      width: 22%;
      float: left;
      margin-left: 3%;
      img {
        width: 80px;
        height: 80px;
      }
    }
    dd {
      width: 200px;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 3%;
    }
  }
}
.van-action-sheet {
  height: 300px;
}
.content {
  width: 97%;
  float: left;
  margin-left: 3%;
}
// 绑定class
.active {
  color: red;
}
.actives {
  color: red;
}
// 优惠券
.coupon {
  width: 84%;
  margin-left: 8%;
  margin-top: 15%;
  line-height: 40px;
  hr {
    margin-top: 1%;
    background: white;
  }
  .left {
    .different {
      color: white;
      border-radius: 10px 0px 0px 10px;
    }

    .Differents {
      color: #ccc;
      border-radius: 0px 10px 10px 0px;
      flex: 1;
      .top {
        margin-left: 2%;
        button {
          width: 35%;
          border: none;
          height: 30px;
          line-height: 30px;
          border-radius: 25px;
        }
      }

      .bottom {
        position: none;
        button {
          width: 100%;
          border: none;
          height: 30px;
          line-height: 30px;
          border-radius: 25px;
        }
        ul {
          display: flex;
          margin-left: 2%;
          li {
            flex: 1;
            margin-right: 2%;
          }
        }
      }
    }
  }
}
// 评价
.one {
  display: flex;
  height: 50px;
  line-height: 50px;
  background: white;
  .count {
    flex: 1;
  }
  .left {
    margin-left: 2%;
  }
  .right {
    margin-right: 2%;
  }
}
.two {
  width: 100%;
  background: white;
  padding: 2%;
  line-height: 30px;
  ul {
    display: flex;
    li {
      height: 30px;
      line-height: 30px;
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
    }
  }
  .twoImg {
    img {
      width: 60px;
      height: 60px;
    }
  }
  .gray {
    width: 98%;
    background: #eee;
    margin-top: 2%;
  }
}
.mainCount {
  margin-top: 2%;
}
// 请选择
.mainTop {
  display: flex;
  background: white;
  height: 40px;
  line-height: 40px;
  margin-top: 2%;
  color: #ccc;
  .Topleft {
    margin-left: 2%;
  }
  .Topcount {
    flex: 1;
  }
}
.zw {
  width: 100%;
  float: left;
  height: 60px;
}
// 点击返回上一页
.back {
  position: absolute;
  top: 1%;
  display: flex;
  width: 15%;
  height: 30px;
  border-radius: 25px;
  line-height: 30px;
  justify-content: space-evenly;
  color: white;
  align-items: center;

  background: #ccc;
}
.number {
  width: 100%;
  height: 100px;
  .van-stepper {
    margin-top: 5%;
    margin-left: 70%;
  }
}
.fot {
  width: 100%;
  float: left;
  margin-top: 3%;
  .cp {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background: white;
  }
  .cpjs {
    width: 100%;
    overflow: hidden;
    img {
      width: 300px;
    }
  }
}
</style>
